$(function () {
  // 1. 初始化获取用户数据
  function init() {
    $.ajax({
      url: '/my/userinfo',
      method: 'GET',
      success: function (res) {
        console.log(res);
        // jquery的几个方法 html()  text()  val() 他们几个方法，既可以读，又可以写
        // 它们是一个可读写的属性
        $('input[name=id]').val(res.data.id);
        $('.layui-form-item [name=username]').val(res.data.username);
        $('.layui-form-item [name=nickname]').val(res.data.nickname);
        $('.layui-form-item [name=email]').val(res.data.email);
      },
    });
  }

  init();

  // $('#userinfo').submit(e=>{})
  $('#userinfo').on('submit', function (e) {
    e.preventDefault();
    // 当我们使用$(this).serialize() 这个方法快速获取表单元素的 值的时候， 只有页面上有name的input 才会 打印出来
    console.log($('#userinfo').serialize());
    // 1. 提交修改， 那么首先是去看 接口文档
    // 主要看的是这个请求 所需要的参数 id  nickname  email
    // id 是在init函数里面  请求成功的返回值
    let id = $('input[name=id]').val();
    let nickname = $('.layui-form-item [name=nickname]').val();
    let email = $('.layui-form-item [name=email]').val();
    // updateUserInfo({ id, nickname, email });
    // 下面这个方法，就会在当前表单里面 将 我们包含有name属性的 input 的值 转换为查询字符串
    updateUserInfo($('#userinfo').serialize());
  });

  // 2. 更新用户数据
  function updateUserInfo(param) {
    $.ajax({
      url: '/my/userinfo',
      method: 'POST',
      data: param,
      // data: $(this).serialize(),
      // data: {
      //   id: xxx,
      //   nickname: xxx,
      //   email: xxx,
      // },
      success: function (res) {
        if (res.status === 0) {
          // 如果更新成功，我们就把 父页面 index.js 里面的 初始化方法调用一遍
          // 凡是涉及到iframe框架  和外面的交互 都有 window.parent 的使用
          // 要去吧 父页面 index.js  里面的 init暴露出来。因为写在 jquery的入口函数里面，就属于函数的局部作用域，外面是看不见
          window.parent.init();
        }
      },
    });
  }
});
